<template>
  <div>
    <div style="display:flex;justify-content: space-around">
      <!-- 柱状图 -->
      <div ref="myChart" :style="{width: '600px', height: '300px',border:'solid'}"> </div>
      <!-- 饼图 -->
      <div ref="myChart1" :style="{width: '600px', height: '300px',border:'solid',marginLeft:'20px'}"></div>

    </div>
    <!-- 订阅人数 -->

    <div class="bigBox">
      <h1>订阅人数</h1>

      <!-- {{item}} -->
      <div class="generalBox-main">
        <div v-for="(item,index) in school" :key="index" class="generalBox">
          <div>{{item.name}}
            <el-tooltip class="item" effect="light" placement="bottom">
              <div slot="content" class="tips-content text-tips-content">
                <div class="rule-box">
                  累计<br>
                  {{item.name}}<br>
                </div>
              </div>
              <i class="el-icon-question hand"></i>
            </el-tooltip>

          </div>
          <div>{{item.numberPeople | ThousandSeparator}}</div>
          <div class="text-common">比上日 <i :class="item.onDayindex==1?'el-icon-top red':'el-icon-bottom green'"></i> {{item.onDay}}%</div>
          <div class="text-common">比上周 <i :class="item.onWeekindex==1?'el-icon-top red':'el-icon-bottom green'"></i> {{item.onWeek}}%</div>
          <div class="text-common">比上月 <i :class="item.onMonthindex==1?'el-icon-top red':'el-icon-bottom green'"></i> {{item.onMonth}}%</div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      school: [
        {
          name: '阅读人数',
          numberPeople: 1234567891457,
          onDay: 10,
          onDayindex: 1,
          onWeek: 15,
          onWeekindex: 1,
          onMonth: 20,
          onMonthindex: 0
        },
        {
          name: '订阅数',
          numberPeople: 14785747854141,
          onDay: 10,
          onDayindex: 0,
          onWeek: 15,
          onWeekindex: 1,
          onMonth: 20,
          onMonthindex: 0
        },
        {
          name: '点击数',
          numberPeople: 140000,
          onDay: 10,
          onDayindex: 1,
          onWeek: 15,
          onWeekindex: 1,
          onMonth: 20,
          onMonthindex: 0
        },
        {
          name: '收藏数',
          numberPeople: 2101123000,
          onDay: 10,
          onDayindex: 1,
          onWeek: 15,
          onWeekindex: 0,
          onMonth: 20,
          onMonthindex: 0
        }
      ],
      list: new Array(5).fill().map((v, i) => {
        return { mage: Math.floor(Math.random() * (60 - 10)) + 10, sage: Math.floor(Math.random() * (60 - 10)) + 10 }
      }),
      list2: new Array(4).fill().map((v, i) => {
        return { value: Math.floor(Math.random() * (1000 - 100)) + 100, name: i == 0 ? '穿越' : i == 1 ? '带球跑' : i == 2 ? '契约' : '权谋', itemStyle: i == 0 ? { color: '#fe0000' } : i == 1 ? { color: '#f29700' } : i == 2 ? { color: '#02b0ed' } : { color: '#55e8ed' } }
      }),

    }
  },
  filters: {
    // 保留千位符并只保留9位小数
    ThousandSeparator(input) {
      return input && input.toString()
        .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ',')).slice(0, 12)
    }

  },
  mounted() {
    this.$nextTick(() => {
      this.drawLine()
      this.drawLine1()
    })
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '读者性别年龄'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['男', '女'],
          // 设置icon图标  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形
          icon: "circle",
          // type:'radio'
        },
        toolbox: {
          show: true,
          feature: {
            // 数据视图
            // dataView: { show: true, readOnly: false },
            // 折线图
            magicType: { show: true, type: ['line', 'bar'] },
            // 配置项还原
            restore: { show: true },
            // 保存图片
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['22岁以下', '22-35岁', '36-45岁', '46-55岁', '55岁以上']
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: { //y轴设置为%
              show: true,
              interval: 'auto',
              formatter: '{value} %',
            },
            max: 60,  //最大值
            min: 0//最小值
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            data: this.list.map(r => r.mage),
            // showBackground: true,
            color: '#C08181',
            itemStyle: {
              //柱形图圆角，鼠标移上去效果
              // emphasis: {
              //   barBorderRadius: [10, 10, 10, 10]
              // },
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 0, 0]
              }
            },

          },
          {
            name: '女',
            type: 'bar',
            data: this.list.map(r => r.sage),
            color: '#6C99A8',
            itemStyle: {
              //柱形图圆角，鼠标移上去效果
              // emphasis: {
              //   barBorderRadius: [10, 10, 10, 10]
              // },
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [15, 15, 0, 0]
              }
            },
          }
        ]
      });
    },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart1)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '读者群体标签'
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          feature: {

            saveAsImage: { show: true }
          }
        },
        legend: {
          // orient: 'vertical',
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30,
          left: 180,
          top: 230,
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['50%', '40%'],
            data: this.list2,
            // 初始
            itemStyle: {
              borderWidth: 5,
              borderColor: '#fff'
            },
            // 悬浮
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
  }
}
</script>
<style scoped lang='scss'>
// 通用样式
.red {
  color: red;
}
.green {
  color: green;
}
.hand {
  cursor: pointer;
  margin-left: 10px;
}
.text-common{
  font-size: 12px;
}
// 盒子样式
.bigBox {
  padding: 10px;
  width: 97%;
  border: solid;
  margin: 20px auto;
  .generalBox-main {
    display: flex;
    margin-top: 10px;
    justify-content: space-around;
    .generalBox {
      padding: 10px 0px 0px 20px;
      border-radius: 10px;
      background-color: #f7f7f7;
      width: 22%;
      div {
        margin: 10px 0px;
        &:nth-child(2) {
          font-weight: bold;
          font-size: 18px;
        }
      }
    }
  }
}
</style>